<template>
	 <scroll-view @scroll="onScroll" scroll-y="true" style="height: 100vh;" @scrolltolower='chudi' class="chang_hong">
		<view class="head" :class="scrollTop>1?'bai_bg':''">
			<view class="head_left"  @click="back"><image src="/static/img/fanhui.png"></image></view>
			<view class="head_center hei_38_bold"></view>
			<view class="head_right hei_30">
				
				
			</view>
		</view>
		
		<view class=" " >
			<view class="app_content">
				<view class="xq_top">
					<swiper
						:indicator-dots="false"
						:autoplay="false"
						circular="true"
						easing-function="default"
						:interval="5000"
						indicator-color="#c7c7c7"
						indicator-active-color="#ffffff"
						:duration="500"
						class="swiper shang_lunbo"
						@change="swiperchang"
					>
						<swiper-item v-for="img in lun_arry" @click="clickImg(img)">
							<view class="swiper-item" ><image :src="img"></image></view>
						</swiper-item>
					</swiper>
					<view class="dots bai_30">{{ current + 1 }}/{{ lun_arry.length }}</view>
				</view>
				<view class="xq_shujv" >
					<view class="xq_shujv_bg" >
					<view class="xq_jia hong_26">
						<view class="xq_jia_left">
							<text class="jia">{{Number(item.points)}}</text>积分
							
							
						</view>
					</view>
					<view class="yajin qian_24">
						<text>商品价值：￥{{item.value}}</text>
						<text></text>
					</view>
					</view>
					<view class="padd_30">
					<view class="xq_name hei_30_bold PingFang">
					    <text>{{item.name}}</text>
					</view>


					
					</view>
				</view>
	
			
				<view class="xq_lei hei_24">
					<view class="xq_lei_item">
						<text class="qian_24 xq_lei_name">规格</text>
						{{item.specification}}
					</view>
					<view class="xq_lei_item">
						<text class="qian_24 xq_lei_name">品牌</text>
						{{item.brand}}
					</view>
				</view>
				
				
				
				
				<view class="xq_tab hui_26_bold PingFang">
					<view :class="xq_tab_on==1?'xq_tab_active':''" @click="xuan_tab(1)">商品详情 </view>
				</view>
				

				
				<view class="xq_content" v-if="xq_tab_on==1">

					<u-parse :content="replace_em(item.description)"></u-parse>
				</view>
	
				
          
		
				
				
				
				
				
				
				
				
				
			</view>

			
			

			
		


			<view class="xq_bottom_body" :class="is_ios?'anquan_box':''">
		
				<view class="xq_bottom">
				
					<button type="button"  class="bai_34 chenge_bg" :class="item.stock==0?'duiwan':''" @click="zulin"  >{{item.stock==0?'已兑完':'立即兑换'}}</button>
				</view>
			</view>
		</view>
<uni-popup id="tan_guge" ref="tan_guge" type="bottom">
<view class="tan_guge chang_hong">
		<view class="tan_guge_shang">
			<image :src="item.image_url?item.image_url.split(',')[0]:''" mode="" class="tan_guge_img"></image>
			<view class="tan_guge_shang_right">
				<view class="tan_guge_name">
					{{item.name}}
				</view>
				<view class="tan_guge_price hong_38">
					{{Number(item.points)}} <text class="hei_24">积分</text> 
				</view>
				
			</view>
			<image src="/static/img/hei_close.png" mode="" class="tan_close"  @click="$refs.tan_guge.close()"></image>
		</view>
		
		



	
	
	<view class="tan_guge_title hei_30 PingFang">
		<text>数量</text>
		<view class="shuliang">
			<text class="shuliang_jian" @click="jian()">-</text>
			<text class="shuliang_shu">{{xd_num}}</text>
			<text class="shuliang_jia" @click="jia()">+</text>
		</view>
	</view>
	<view class="heji">
		积分合计：<text class="hong_30">{{(xd_num*item.points).toFixed(2)}}</text>
	</view>
	
	<view class="tan_guge_bottom">
		<button class="bai_30 chenge_bg" @click="xiabu">立即兑换</button>
	</view>
</view>
</uni-popup>

<uni-popup id="tan_login" ref="tan_login" type="center">
<view class="tan_login">
	<view class="tan_login_title hei_38_bold PingFang">
		<text></text><text>请先登录</text><image src="/static/img/hei_close.png" mode=""@click="$refs.tan_login.close()"></image>
	</view>
	<view class="tan_login_tishi hei_28">
		用于为你提供注册登录、查看订单记录等服务
	</view>
	<view class="tan_login_bottom">
		<button type="button"  class="bai_30 chenge_bg"    open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="bindGetPhoneNumber" scope='phoneNumber'>授权手机号一键登录</button>
	</view>	
</view>
</uni-popup>

	 </scroll-view>
</template>

<script>
import uParse from '@/components/feng-parse/parse.vue';
export default {
	data() {
		return {
			img_url: uni.getStorageSync('img_url'),
			current: 0,
			xq_tab_on:1,
			goodsid:'',
			item:'',
			is_ios:false,
			islogin:false,
			logo:'',
			xd_num:1,
			lun_arry:[],
			scrollTop:0,
			
		};
	},
	components: {
		uParse
	},
	//  onPageScroll(object) {
	     
	// 	 this.scrollTop=object.scrollTop
	// },  
	onReady() {
		
		
	},
	onShow() {



	},
	
	onUnload() {
 
	},
	onLoad(option) {
		this.goodsid=option.goodsid
		this.get_xq()
		
	},
	created() {},
	methods: {
		//上拉加载
		chudi() {
			console.log('上拉加载');
			if(this.xq_tab_on==2||this.xq_tab_on==3){
				if (this.is_all) {
					// uni.showToast({
					// 	title: '没有更多内容了',
					// 	duration: 2000,
					// 	icon: 'none'
					// });
					uni.stopPullDownRefresh();
				} else {
						this.page++;
						this.get_information();
				}
			}
			if(this.xq_tab_on==4){
				this.sd_page++;
				this.gei_shaidan();
			}
			
			
		},
		jian(){
			if(this.xd_num>1){
				this.xd_num--
			}
			
		},
		jia(){
			this.xd_num++
		},
		
		go(url) {
			uni.navigateTo({
				url: url
			});
		},
		
		back() {
			uni.navigateBack({
			    delta: 1 // 这里的delta表示要返回的层数
			});
		},
	
		onScroll(e) {
		      // e.detail.scrollTop 表示当前滚动距离
		      // console.log('页面滚动距离：', e.detail.scrollTop);
			  this.scrollTop=e.detail.scrollTop
		      // 在这里编写你的滚动相关逻辑
        },
		

		get_xq(type){
			var that=this
			var data={
				goodsid: this.goodsid
			}
			if(type){
				data['none_load']=true
			}
			this.$http
				.get({
					url: '/api/getProduct/'+ this.goodsid,
				})
				.then(res => {
					if (res.code == 200) {
						this.item = res.product
						if(this.item.image_url){
							this.lun_arry=this.item.image_url.split(',')
						}
						
					}
				});
			
		},
		replace_em(str) {
			if(!str){
				return false
			}
			console.log(str)
			str = str.replace(/amp;/g, "");
			str = str.replace(/&nbsp;/g, "");
			str = str.replace(/nbsp;/g, "");
			str = str.replace(/\</g, '&lt;');
			// str = str.replace(/\>/g, '&gt;');
			str = str.replace(/&gt;/g, ">");
			str = str.replace(/gt;/g, ">");
			str = str.replace(/\n/g, '<br/>');
			str = str.replace(/\[em_([0-9]*)\]/g, '<img src="https://imgxh.hongvv.com/zu/static/bkhumor-emoji/$1.gif" border="0" style="width:40rpx"/></img>');
			return str;
		},
		xuan_tab(index){
		  this.xq_tab_on=index	

		  
		},
	   xiabu(){
		   var that=this
		  
			   this.$http
			   	.post({
			   		url: '/api/createOrder',
			   		data: {
			   			productId:this.goodsid,
						num:this.xd_num
			   		}
			   	})
			   	.then(res => {
			   		if (res.code == 200) {
						
						uni.showToast({
							title: '下单成功'
						});
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/index/dingdan'
							})
						},500)
						
						
			    	}
			   });
		   
	   },
	   bindGetPhoneNumber(e){
		   if(e.detail.errorMessage){
			   uni.showToast({
			   	title: e.detail.errorMessage,
			   	icon: 'none'
			   });
			   uni.redirectTo({
			   	url:'/pages/index/login'
			   })
		   }else{
			   
			   //#ifdef MP-WEIXIN
			   this.$http
			   	.post({
					url: '/mapi/weixin_applet/getphonenumber',
					data: {
						code:e.detail.code,
						source1:'xcx',
						source:'user'
						
			   		}
			   	})
			   	.then(res => {
			   		if (res.code == 0) {
						uni.setStorageSync("Cookie",res.data.cookie)
						uni.showToast({
							title: '登录成功'
						});
						this.islogin=true
						this.$refs.tan_login.close()
						this.page=0
						this.get_dikou();
						this.get_user()
			    	}else{
						uni.redirectTo({
							url:'/pages/index/login'
						})
					}
			   });
			   
			   //#endif
			   
			   
		   }
		   console.log(e,'99999')
	   },
	   zulin(){
		   if(this.item.stock==0){
			   uni.showToast({
			   	title: '您来晚了，该商品已兑完~',
				icon:'none'
			   });
			   return false
		   }
		   this.$refs.tan_guge.open()
		 
		   
	   },
		swiperchang(e) {
			this.current = e.detail.current;
		},
		clickImg(img) {
			uni.previewImage({
				urls: ['' + img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		}
		
		
	},
	filters: {
		timeStamp: function(value) {
			if (value == null) {
				return 'null';
			}
			var i = (value + '').length;
			while (i++ < 13) value = value + '0';
			value = Number(value);
			var date = new Date(value);
			//date.setTime(value);
			var month = date.getMonth() + 1;
			var hours = date.getHours();
			if (hours < 10) hours = '0' + hours;
			var minutes = date.getMinutes();
			if (minutes < 10) minutes = '0' + minutes;
			var time = date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + hours + ':' + minutes;
			return time;
		}
	}
};
</script>
<style>
page{
	background-color:#f0f2f5 ;
}
.app_content {
	padding-bottom: 100rpx;
}
.head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 26rpx;
	height: 96rpx;
	position: fixed;
	top: 0;
	width: 100%;
	background: none ;
	box-sizing: border-box;
	transition: all 0.7s;
}

.swiper-slide image {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}

.head_center{
	text-align: center;
}
.xq_top {
	height: 750rpx;
	position: relative;
}

.xq_bottom {
	height: 100rpx;
	
}

.xq_bottom_body {
	/* height: 100rpx; */
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	box-shadow: 0rpx -3rpx 9rpx 0rpx 
			rgba(0, 0, 0, 0.11);
}


.xq_bottom {
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
}

.xq_bottom_right {
	text-align: right;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.xq_bottom button {
	width: 100%;
	height: 74rpx;
	border-radius: 37rpx;
	line-height: 74rpx;
	background-color: #fd4259;
}
.xq_bottom_right .baoming {
	background-color: #fd4259;
}
.jinzhi {
	background-color: #e9e9e9 !important;
}
.xq_bottom_item {
	margin-right: 50rpx;
	text-align: center;
	/* width: 25%; */
}

.xq_bottom_item:last-child {
	margin-right: 0;
}

.xq_bottom_item p {
	-webkit-transform: scale(0.9);
}


.shang_lunbo {
	height: 750rpx;
}
.shang_lunbo image {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}
.swiper-item {
	width: 100%;
	height: 100%;
}
.dots {
	margin: auto;
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	background-color: rgba(0, 0, 0, 0.4);
	height: 46rpx;
	width: 99rpx;
	text-align: center;
	line-height: 46rpx;
	border-radius: 23rpx;
}

.xq_shujv{
	padding: 0 0rpx 16rpx;
	margin-bottom: 10rpx;
	background-color: #ffffff;
	border-radius: 20rpx 20rpx 10rpx 10rpx;
	overflow: hidden;
	margin-top: 10rpx;
}
.xq_jia_left{
	display: flex;
	align-items: flex-end;
}
.xq_jia_left image{
	width: 70rpx;
	height: 32rpx;
	margin-left: 10rpx;
}
.xq_jia{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0rpx 0 10rpx;
	
}

.jia{
	font-size: 56rpx;
	position: relative;
	top: 8rpx;
	margin-right: 6rpx;
}
.yajin{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.yajin{
	margin-top: 14rpx;
}
.xq_name{
	margin: 14rpx 0 10rpx;
	word-break: break-all;
}
.xq_name image{
	width: 34rpx;
	height: 34rpx;
}

.shang{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #ffffff;
}
.shang_right{
	display: flex;
	align-items: center;
}
.shang_right button:first-child{
	width: 116rpx;
	height: 46rpx;
	background-color: #ffffff;
	border-radius: 23rpx;
	border: solid 1px #6a3906;
	margin-right: 20rpx;
	line-height: 46rpx;
}
.shang_right button:last-child{
	width: 116rpx;
	height: 46rpx;
	background-color: #6a3906;
	border-radius: 23rpx;
	line-height: 46rpx;
	border: none;
}
.xq_lei{
	padding: 0 30rpx;
	background-color: #ffffff;
	margin: 10rpx 0;
}
.xq_lei_item{
	height: 90rpx;
	border-bottom: 1px solid #f2f2f2;
	display: flex;
	align-items: center;
}
.xq_lei_name{
	width: 126rpx;
}
.xq_lei_item image{
	width: 22rpx;
	height: 22rpx;
	margin-left: 10rpx;
}
.xq_tab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	height: 94rpx;
	padding: 0 30rpx;
}
/* .xq_tab view{
	margin-right: 115rpx;
}
.xq_tab view:last-child{
	margin-right: 0;
} */
.xq_tab_active{
	color: #6a3906;
	position: relative;
}
.xq_tab_active::before{
	content: '';
	display: inline-block;
	width: 50rpx;
	height: 4rpx;
	background-color: #6a3906;
	border-radius: 2rpx;
	position: absolute;
	left: 50%;
	bottom: -14rpx;
	transform: translate(-50%,0);
}
.xq_content {
	background-color: #ffffff;
	padding: 0 10rpx 30rpx;
}
.tan_guge{
	padding: 0 30rpx;
	background-color: #ffffff;
	box-sizing: border-box;
}
.tan_guge_img{
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	flex-shrink: 0;   /* 防止挤压 */
}
.tan_guge_shang{
	display: flex;
	align-items: center;
	padding: 30rpx 0 30rpx;
	
	position: relative;
}
.tan_close{
	position: absolute;
	right: 30rpx;
	width: 26rpx;
	height: 26rpx;
	top: 40rpx;
}
.tan_guge_price image{
	width: 70rpx;
	height: 32rpx;
	margin-left: 10rpx;
}
.tan_guge_price text{
	margin-left: 6rpx;
}
.tan_guge_shang_right{
	margin-left: 20rpx;
}
.tan_guge_title{
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px dashed #eeefee;
	border-bottom: 1px dashed #eeefee;
	margin-bottom: 30rpx;
}


.tan_guge_bottom{
	padding: 50rpx 0 50rpx;
}
.tan_guge_bottom button{
	height: 88rpx;
	background-color: #6a3906;
	border-radius: 44rpx;
	line-height: 88rpx;
}

.bai_bg{
	background-color: #ffffff;
}
.head_right{
	text-align: right;
}
.head_right image{
	width: 32rpx;
	height: 32rpx;
}

.zulin{
	padding: 0 30rpx 30rpx;
	background-color: #ffffff;
}
.anquan_box{
	padding-bottom: 30rpx;
}

.item{
	border-bottom: 1px solid #dcdcdc;
}

.tan_login{
	width: 688rpx;
	height: 370rpx;
	background-color: #ffffff;
	border-radius: 34rpx;
	padding: 0 26rpx;
	box-sizing: border-box;
}
.tan_xinxi{
	width: 600rpx;
}
.tan_login_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	border-bottom: 1px solid #ececec;
}
.tan_login_title image{
	width: 26rpx;
	height: 26rpx;
}
.tan_login_tishi{
	text-align: center;
	line-height: 130rpx;
}
.tan_login_bottom{
	text-align: center;
}
.tan_login_bottom button{
	width: 467rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin: 0 auto;
}
.padd_30{
	padding: 0rpx 30rpx 0;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	background-color: #ffffff;
	
}
.xq_shujv_bg{
	padding: 0 30rpx ;
}
.tan_guge_name{
	width: 400rpx;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
	margin-bottom: 20rpx;
	word-break: break-all;
}
.shuliang{
	display: flex;
	align-items: center;
	
}
.shuliang_jian,.shuliang_jia{
	width: 60rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	background-color: #eeefee;
}
.shuliang_shu{
	width: 100rpx;
	text-align: center;
	line-height: 60rpx;
	margin: 0 10rpx;
	background-color: #eeefee;
}
.duiwan{
	background-color: #e9e9e9 !important;
	color: #999;
}
</style>
